import React, { Component } from "react";
import { Modal, Toast } from "antd-mobile";
import CryptographicNumberInput from "./CryptographicNumberInput";
import { ThemeDefault, ThemeLife } from "../../../tools/theme";
import "./PaypwdVerify.scss";

export default class PaypwdVerify extends Component {
	constructor(props) {
		super(props);
		this.state = {
			/**倒计时 */
			time: 0,
			/** 短信验证码 */
			verifyCode: "",
			/** 短信验证码是否输入完整 */
			isVerifyCodeComplete: false,
			/**支付密码 */
			payPassword: "",
			/** 支付密码是否输入完整 */
			isPayPasswordComplete: false
		};
		/** 计时器 */
		this.timer = null;
		/** 是否是第一次打开 */
		this.isFrist = true;
	}

	/**第一次打开时会默认调用发送验证码 */
	componentDidUpdate() {
		if (this.props.visible && this.isFrist) {
			this.isFrist = false;
			this.sendSMSCode();
		}
	}

	componentWillUnmount() {
		/** 注销定时器 */
		if (this.timer) {
			clearTimeout(this.timer);
		}
	}
	/** 开始倒计时 */
	startTime() {
		this.setState({ time: this.state.time - 1 }, () => {
			if (this.state.time > 0) {
				this.timer = setTimeout(() => this.startTime(), 1000);
			}
		});
	}
	/** 发送验证码 */
	sendSMSCode() {
		this.props.onSendSMSCode &&
			this.props.onSendSMSCode(() => {
				this.setState({ time: 60 }, () => this.startTime());
			});
	}

	/** 提交 */
	submit() {
		let { payPassword, verifyCode } = this.state;
		if (!this.state.isPayPasswordComplete) {
			return Toast.info("支付密码不能为空", 2);
		}
		if (!this.state.isVerifyCodeComplete) {
			return Toast.info("短信验证码不能为空", 2);
		}
		this.props.onSubmit && this.props.onSubmit({ payPassword, verifyCode });
	}

	render() {
		let {
			visible = false,
			onClose,
			title,
			className = "",
			subName = "确定"
		} = this.props;
		let isSubmit =
			this.state.isPayPasswordComplete && this.state.isVerifyCodeComplete;
		return (
			<Modal
				className={`xhbPayModal ${className}`}
				title={title}
				visible={visible}
				transparent
				closable
				maskClosable={false}
				onClose={onClose}
			>
				<div className="XhbPayModal-form">
					<p>请输入支付密码</p>
					<CryptographicNumberInput
						onChange={isPayPasswordComplete =>
							this.setState({ isPayPasswordComplete })
						}
						onComplete={payPassword => this.setState({ payPassword })}
					/>
					<p>验证码已发送至手机</p>
					<CryptographicNumberInput
						isNormal
						onChange={isVerifyCodeComplete =>
							this.setState({ isVerifyCodeComplete })
						}
						onComplete={verifyCode => this.setState({ verifyCode })}
					/>
					{this.state.time === 0 ? (
						<div className="smstime" onClick={() => this.sendSMSCode()}>
							重新发送
						</div>
					) : (
						<div className="smstime">{this.state.time}s后重新发送</div>
					)}
					<ThemeDefault>
						{isSubmit ? (
							<div
								className="btn"
								onClick={() => {
									this.submit();
								}}
							>
								{subName}
							</div>
						) : (
							<div className="btn" style={{ opacity: isSubmit ? 1 : 0.15 }}>
								{subName}
							</div>
						)}
					</ThemeDefault>
					<ThemeLife>
						{isSubmit ? (
							<div
								className="btn a-gradient"
								onClick={() => {
									this.submit();
								}}
							>
								{subName}
							</div>
						) : (
							<div
								className="btn a-gradient"
								style={{ opacity: isSubmit ? 1 : 0.15 }}
							>
								{subName}
							</div>
						)}
					</ThemeLife>
				</div>
			</Modal>
		);
	}
}
